<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.earthrotate{
			width: 310px;
			height: 310px;
			background-image: url(images/000.png);
			border-radius: 170px;
			/*设置坐标系*/
			position: relative;
			/*创建动画，设置参数*
			run动画名称 2s 执行时间 infinite反复执行
			速度不均匀，前快后慢不同意；解决，参数linear*/
			animation: run  1s linear infinite;
			
		}
		.earthrotate:hover{
			/*鼠标移入，地图暂停旋转，鼠标移出，继续旋转
			play-state播放状态*/
			
			animation-play-state: paused;
		}
		/*定义动画的关键帧
		变形(形状的变化)tranform*/
		@keyframes run{
			from{transform: rotate(0deg);}
			to{transform: rotate(360deg);}
		}
		}
	</style>
	<body>
		<h3>地球旋转</h3>
		<div>
			<div class="earthrotate"></div>
		</div>
	</body>
</html>
